<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理系统 - 登录</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    body {
      background-color: #f5f8fb;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .login-container {
      max-width: 420px;
      width: 100%;
      padding: 30px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    .login-header {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .login-header h2 {
      color: #3c4858;
      font-weight: 600;
    }
    
    .form-control {
      padding: 12px;
      height: auto;
      border-radius: 6px;
    }
    
    .input-group-text {
      background-color: #fff;
      border-right: none;
    }
    
    .form-control:focus {
      border-color: #4e73df;
      box-shadow: 0 0 0 0.25rem rgba(78, 115, 223, 0.25);
    }
    
    .input-group .form-control {
      border-left: none;
    }
    
    .captcha-container {
      display: flex;
      margin-bottom: 1rem;
    }
    
    .captcha-input {
      flex: 1;
      margin-right: 10px;
    }
    
    .captcha-image {
      height: 46px;
      border-radius: 6px;
      cursor: pointer;
    }
    
    .login-btn {
      width: 100%;
      padding: 12px;
      background-color: #4e73df;
      border-color: #4e73df;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .login-btn:hover {
      background-color: #3a5ccc;
      border-color: #3a5ccc;
    }
    
    .alert {
      display: none;
      margin-bottom: 20px;
    }
    
    .logo {
      max-width: 100px;
      margin-bottom: 15px;
    }
    
    .footer-text {
      text-align: center;
      margin-top: 20px;
      color: #6c757d;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="login-container">
    <div class="login-header">
      <img src="img/logo.png" alt="Logo" class="logo">
      <h2>员工管理系统</h2>
      <p class="text-muted">欢迎登录，请输入您的账号和密码</p>
    </div>
    
    <div class="alert alert-danger" id="error-message" role="alert"></div>
    
    <form id="login-form">
      <div class="mb-3">
        <div class="input-group">
          <span class="input-group-text"><i class="bi bi-person"></i></span>
          <input type="text" class="form-control" id="username" placeholder="用户名" required>
        </div>
      </div>
      
      <div class="mb-3">
        <div class="input-group">
          <span class="input-group-text"><i class="bi bi-lock"></i></span>
          <input type="password" class="form-control" id="password" placeholder="密码" required>
        </div>
      </div>
      
      <div class="captcha-container">
        <div class="input-group captcha-input">
          <span class="input-group-text"><i class="bi bi-shield-lock"></i></span>
          <input type="text" class="form-control" id="captcha" placeholder="验证码" required>
        </div>
        <img id="captcha-image" class="captcha-image" src="" alt="验证码" title="点击刷新">
      </div>
      
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="remember-me">
        <label class="form-check-label" for="remember-me">记住我</label>
      </div>
      
      <button type="submit" class="btn btn-primary login-btn" id="login-button">
        登录系统
      </button>
    </form>
    
    <div class="footer-text">
      © 2023 员工管理系统 - 技术支持电话：400-123-4567
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="js/auth.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 如果用户已登录，直接跳转到主页
      if (isLoggedIn()) {
        window.location.href = 'dashboard.html';
        return;
      }
      
      // 获取验证码
      let captchaKey = '';
      
      function refreshCaptcha() {
        getCaptcha()
          .then(data => {
            document.getElementById('captcha-image').src = data.captchaUrl;
            captchaKey = data.captchaKey;
          })
          .catch(error => {
            showError('获取验证码失败，请刷新页面重试');
            console.error('验证码获取失败:', error);
          });
      }
      
      // 初始加载验证码
      refreshCaptcha();
      
      // 点击验证码图片刷新
      document.getElementById('captcha-image').addEventListener('click', refreshCaptcha);
      
      // 显示错误消息
      function showError(message) {
        const errorElement = document.getElementById('error-message');
        errorElement.textContent = message;
        errorElement.style.display = 'block';
        
        // 3秒后自动隐藏错误信息
        setTimeout(() => {
          errorElement.style.display = 'none';
        }, 3000);
      }
      
      // 登录表单提交
      document.getElementById('login-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;
        const captcha = document.getElementById('captcha').value.trim();
        const rememberMe = document.getElementById('remember-me').checked;
        
        // 禁用登录按钮，显示加载状态
        const loginButton = document.getElementById('login-button');
        loginButton.disabled = true;
        loginButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 登录中...';
        
        // 发送登录请求
        login(username, password, captcha, captchaKey)
          .then(userInfo => {
            // 登录成功，保存记住我状态（如果需要）
            if (rememberMe) {
              localStorage.setItem('remember_credentials', JSON.stringify({
                username: username,
                timestamp: new Date().getTime()
              }));
            } else {
              localStorage.removeItem('remember_credentials');
            }
            
            // 跳转到主页
            window.location.href = 'dashboard.html';
          })
          .catch(error => {
            // 登录失败，显示错误信息
            showError(error.message || '登录失败，请检查用户名和密码');
            console.error('登录失败:', error);
            
            // 刷新验证码
            refreshCaptcha();
            document.getElementById('captcha').value = '';
            
            // 恢复登录按钮状态
            loginButton.disabled = false;
            loginButton.textContent = '登录系统';
          });
      });
      
      // 检查是否有记住的凭据
      const savedCredentials = localStorage.getItem('remember_credentials');
      if (savedCredentials) {
        try {
          const credentials = JSON.parse(savedCredentials);
          const now = new Date().getTime();
          const oneWeek = 7 * 24 * 60 * 60 * 1000; // 一周的毫秒数
          
          // 如果凭据未超过一周，自动填充用户名并勾选记住我
          if (now - credentials.timestamp < oneWeek) {
            document.getElementById('username').value = credentials.username;
            document.getElementById('remember-me').checked = true;
          } else {
            // 凭据过期，删除
            localStorage.removeItem('remember_credentials');
          }
        } catch (e) {
          console.error('解析保存的凭据失败:', e);
          localStorage.removeItem('remember_credentials');
        }
      }
    });
  </script>
</body>
</html> 